<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人信息</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_login.css">

    <!--     加载 static底下的 favicon.ico 图标-->
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>

</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <!-- 此标签用于占位 分隔 -->
    <div class="spacer"></div>

    <a href="blog_list.html">个人主页</a>

</div>

<!-- 登录页面容器 整个页面框-->
<!-- 通过此页面框 在其内部设计登录框 可以通过弹性布局让其水平垂直居中 -->
<!-- 如果直接弄登录框 那就得设计外边距等使其水平垂直对齐 -->
<div class="login-container" >

    <!-- 登录指示 样式 页面里的登录框-->
    <div class="dialog" style="height:300px">
        <h2>修改信息</h2>

        <div class="row">
                <span>
                    <b>新用户名</b>
                </span>
            <input type="text" id="username" placeholder="新用户名最高6位">
        </div>

        <div class="row">
                <span>
                    <b>新密码</b>
                </span>
            <input type="password" id="password" placeholder="新密码长度最低6位最高15位">
        </div>

        <div class="row">
            <span>
                <b>确认密码</b>
            </span>
            <input type="password" id="judgepassword" placeholder="输入确认密码">
        </div>


        <!-- 这里存放错误信息 -->
        <div class="error">

        </div>


        <div class="row">
            <!-- 换成submit提交标签按钮 -->
            <!-- <a id="submit" href ="blog_list.html">登录</a> -->
            <button id="submit">修改信息</button>
        </div>
    </div>

</div>

<!--<script src="../../../../../captcha/src/main/resources/static/jquery.js"></script>-->
<script src="js/jquery.js"></script>
<script>



    let username=document.querySelector('#username');
    let password = document.querySelector('#password');
    let judgepassword = document.querySelector('#judgepassword');
    let error = document.querySelector('.error');
    let button = document.querySelector('#submit');
    error.innerHTML = '不需要修改的信息在对应的框内不需要填写';

    button.onclick = function () {
        //  输入了用户名
        if(username.value.length!=0){
            if(username.value.len>6){
                error.innerHTML='新用户名长度不能超过6位!';
                username.focus();
                return;
            }
        }

        // 当填了新密码时
        if(password.value.length!=0){
            if(password.value.length<6){
                password.focus();
                error.innerHTML = '密码长度不能低于6位!';
                return;
            }else if(password.value.length>15){
                password.focus();
                error.innerHTML = '密码长度不能超过15位!';
                return;
            } else if(judgepassword.value == '') {
                judgepassword.focus();
                error.innerHTML = '确认密码不能为空'
                return;
            } else if(judgepassword.value!=password.value){
                judgepassword.focus();
                error.innerHTML = '密码与确认密码不一致';
                return;
            }

        }
        if(username.value.length==0&&username.value.length==0){
            error.innerHTML='请输入要修改的信息!';
            return;
        }


            button.className="forbid";
            error.innerHTML ='请稍等, 信息正在修改中...';
            let mes ={
                "username":username.value,
                "password":password.value
            };
            $.ajax({
                url: 'user/modifymessage',
                type: 'post',
                data: mes,
                success: function (body) {
                    if (body != null && body.code == 200) {
                        alert('信息修改成功!')
                        location.assign("blog_list.html");

                    } else {
                        error.innerHTML=body.msg;

                    }
                    button.className="allow";
                }
            });
    }
</script>
</body>
</html>